<template>
  <div>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item
        v-for="item in cellList"
        :key="item.cid"
        :label="item.cname"
        :value="item.cid"
      >
        <h3
          class="medium"
          :id="'h3-' + item.cname"
          @click="queryOne(item.cname)"
        >
          {{ item.cname }}
        </h3>
      </el-carousel-item>
    </el-carousel>

    <el-row>
      <el-col :span="24">
        <el-card>
          <h2>下辖楼宇信息</h2>
          <el-table :data="cell.buildings" style="width: 100%">
            <el-table-column
              prop="bname"
              label="栋数"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="untis"
              label="单元数量"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="levels"
              label="楼层数量"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="height"
              label="楼宇高度"
              width="180"
            ></el-table-column>
            <!-- 其他楼宇字段 -->
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <h2>下辖车位信息</h2>
          <el-table :data="cell.stalls" style="width: 100%">
            <el-table-column
              prop="parkingnum"
              label="车位编号"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="kind"
              label="车位类型"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="area"
              label="车位面积"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="车位租金"
              width="180"
            ></el-table-column>
            <!-- 其他车位字段 -->
          </el-table>
        </el-card>
      </el-col>
      <!-- 类似地添加汽车和访客的卡片 -->
      <el-col :span="24">
        <el-card>
          <h2>到访来客信息</h2>
          <el-table :data="cell.visitors" style="width: 100%">
            <el-table-column prop="vname" label="名字" width="180">
            </el-table-column>
            <!-- <el-table-column
              prop="sex"
              label="性别"
              width="180"
            ></el-table-column> -->
            <el-table-column label="性别" prop="sex">
              <template slot-scope="scope">
                <el-tag type="success" effect="dark" v-if="scope.row.sex == 0"
                  >女</el-tag
                >
                <el-tag type="error" effect="dark" v-if="scope.row.sex == 1"
                  >男</el-tag
                >
              </template>
            </el-table-column>

            <el-table-column
              prop="tel"
              label="联系电话"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="begain_time"
              label="到访时间"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="end_time"
              label="离开时间"
              width="180"
            ></el-table-column>
            <!-- 其他车位字段 -->
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cellList: { cname: "", cid: null },
      //url: "../../assets/image/cell.jpg",
      cell: { buildings: {}, stalls: {}, visitors: {} },
    };
  },
  methods: {
    queryOne(item) {
      //console.log(this.cellList.cname);

      // for (var i in this.cellList) {
      //   var value = this.cellList[i].cname;
      //   console.log(this.cellList[i].cname);
      // }
      this.cell={buildings:{},stalls:{},visitors:{}}
      var value2 = document.getElementById("h3-" + item).innerHTML;
      console.log(value2);

      this.$route.params.value = value2;
      console.log("状态栏参数:" + this.$route.params.value);
      this.$axios
        .get("/cell/getCellByCname/" + this.$route.params.value)
        .then((res) => {
          this.cell = res.data.data;
          console.log(this.cell);
          this.cell.buildings = res.data.data.buildingList;
          this.cell.stalls = res.data.data.stallList;
          this.cell.visitors = res.data.data.visitorList;
        });
    },
    //顶部图片展示小区名字
    queryCells() {
      this.$axios.get("/cell/getAll").then((res) => {
        this.cellList = res.data.data;
        //console.log(this.cellList);
      });
    },
    //展示小区具体信息
    getCellByCname() {
      console.log("状态栏参数:" + this.$route.params.value);
      this.$axios
        .get("/cell/getCellByCname/" + this.$route.params.value)
        .then((res) => {
          this.cell = res.data.data;
          this.cell.buildings = res.data.data.buildingList;
          console.log();
          this.cell.stalls = res.data.data.stallList;
          this.cell.visitors = res.data.data.visitorList;
          //console.log(this.cell);
        });
    },
  },
  mounted() {
    this.queryCells();
    this.getCellByCname();
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
